<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item label="账号区域范围">
      <el-select v-model="form.province"  placeholder="请选择省份" style="margin-right:3px;">
      	    <el-option
      v-for="item in provinceList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.city"  placeholder="请选择城市" style="margin-right:3px;">
      	    <el-option
      v-for="item in cityList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.county"  placeholder="请选择县市" style="margin-right:3px;">
      	    <el-option
      v-for="item in countyList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.school"  placeholder="请选择学校">
      	    <el-option
      v-for="item in schoolList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="账号">
      	 <el-input v-model="form.acc"></el-input>
      </el-form-item>
      <el-form-item label="密码">
      	 <el-input v-model="form.pwd"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
      	 <el-input v-model="form.username"></el-input>
     </el-form-item>
      <el-form-item label="工作单位">
      	 <el-input v-model="form.departname"></el-input>
      </el-form-item>
      <el-form-item label="职务">
      	 <el-input v-model="form.jobname"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
      	 <el-input v-model="form.idcard"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
      	 <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="层级权限">
      	<span style="margin-right:13px;">层级</span>
        <el-radio-group v-model="form.level">
          <el-radio label="省厅" value="通知"/>
          <el-radio label="地区" value="地区"/>
          <el-radio label="县市" value="县市"/>
          <el-radio label="机构" value="机构"/>
        </el-radio-group>
        <div style="margin-left:10px;"></div>
      	<span style="margin-right:13px;">权限</span>
        <el-radio-group v-model="form.permission">
          <el-radio label="超级管理员" value="超级管理员"/>
          <el-radio label="管理员" value="管理员"/>
          <el-radio label="评委" value="评委"/>
          <el-radio label="用户" value="用户"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注信息">
      	 <el-input v-model="form.memo"></el-input>
      </el-form-item>
      <el-form-item>
      	<el-row>
      		<el-col :span="10">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onRefresh">刷新</el-button>
      		</el-col>
      		<el-col :span="4">
      			
      		</el-col>
      		<el-col :span="10">
        <el-button @click="onImport">导入数据</el-button>
        <el-link  href="#" target="_blank" style="margin-left:30px;">下载导入模板</el-link>
      		</el-col>
      	</el-row>
      </el-form-item>
    </el-form>
<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="工作单位" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.departname }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="职务" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.jobname }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="手机号码" width="130" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="层级" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.level }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="创建日期" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
   </el-table>

<el-dialog
  title="用户数据导入"
  :visible.sync="importDialogShow"
  width="50%"
  :show-close="false">
  <span>用户数据导入</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleImportDialogClose">取 消</el-button>
    <el-button type="primary" @click="handleImportDialogClose">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      importDialogShow:false,
	  provinceList:[{label:"湖南省",value:"湖南省"}],
	  cityList:[{label:"湘西土家族苗族自治州",value:"湘西土家族苗族自治州"}],
	  countyList:[{label:"吉首市",value:"吉首市"}],
	  schoolList:[
	    	 {label:"第一中学",value:"第一中学"},
	    	 {label:"第二中学",value:"第二中学"},
	    	 {label:"第三中学",value:"第三中学"}
	  ],
      form: {
      	province:'',
        city: '',
        county:'',
        pushScope: '',
        school:'',
        acc: '',
        pwd:'',
        username:'',
        departname:'',
        jobname:'',
        idcard:'',
        mobile:'',
        level:'',
        permission:'',
        memo:'',
      },
      listLoading: false,
      list:[
      {acc:"",username:"测试账号1",departname:"内务部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号2",departname:"后勤部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号3",departname:"法务部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号4",departname:"财务部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号5",departname:"教体部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号6",departname:"科技部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号7",departname:"人社部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号8",departname:"农业部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号9",departname:"审计部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      {acc:"",username:"测试账号10",departname:"开发部",jobname:"老师",
      idcard:"",mobile:"",level:"",permission:"",created_at:"2024-10-30 12:00:00"},
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onRefresh() {
      this.$message({
        message: 'refresh!',
        type: 'warning'
      })
    },
    onImport(){
      this.showImportDialog();
    },
    showImportDialog(){
    	console.log("showImportDialog")
    	this.importDialogShow=true;
    },
    handleImportDialogClose(){
    	console.log("handleImportDialogClose")
    	this.importDialogShow=false;
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

